<template>
  <ModalTemplate @close="$emit('close')">
    <div slot="header">
      <h2 class="inline">查看复盘</h2>
    </div>
    <div class="people-work-list">
      <dl v-for="(item, index) in showList" :key="'replay_' + index">
        <dt>
          {{ item.title }}
        </dt>
        <dd v-html="showContent(item.content)"></dd>
      </dl>
    </div>
    <div slot="footer">
      <Button @click="$emit('close')">返回</Button>
    </div>
  </ModalTemplate>
</template>

<script>
import { format2Html } from "js/utils.js";
export default {
  props: ["replayItem", "questions", "subQuestions", "list", "tagNames"],
  data() {
    return {
      replayList: [],
    };
  },
  computed: {
    showList() {
      let list = this.replayList;
      return list;
    },
  },
  methods: {
    initData() {
      if (this.replayItem) {
        this.replayList.push(this.replayItem);
      } else if (this.list) {
        this.replayList.push(...this.list);
      }
    },
    showContent(content) {
      if (!content) {
        return "";
      }
      let str = content.trim();
      let qas = this.questions || [];
      for (let i = 0, n = qas.length; i < n; i++) {
        let question = qas[i];
        str = str.replace(question, "<b>" + question + "</b>");
        if (this.subQuestions) {
          let subStr = this.subQuestions[question];
          if (subStr) {
            str = str.replace(subStr, "<b>" + subStr + "</b>");
          }
        }
      }
      let tagNames = this.tagNames || [];
      for (let i = 0, n = tagNames.length; i < n; i++) {
        let tag = tagNames[i];
        str = str.replace(tag, `<b class="red">${tag}</b>`);
      }
      str = str.trim();
      str = format2Html(str);
      return str;
    },
  },
  mounted() {
    this.initData();
  },
};
</script>

<style></style>
